<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <jdk></jdk>
        <bro></bro>
    </div>
    <template id="inserted">
         <fieldset>
             <legend>这里是全局组件</legend>
             {{msg}}
             <child></child>
         </fieldset>
    </template>
    <template id="child">
          <fieldset>
            <legend>child</legend>
            {{msg}}
          </fieldset>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js'></script>
    <script>
        //注册一个全局组件
        Vue.component("jdk",{
            template:"#inserted",
            data(){
                return{
                    msg:"你也喜欢vue嘛？"
                }
            },
            components: {
                "child":{
                    template:"#child",
                    data(){
                        return{
                            msg:"明年真的能找到工作嘛？"
                        }
                    }
                }
            }
        });
        Vue.component("bro",{
            template:"<h1>还还朕emo啦</h1>"
        })
         const vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
         })
    </script>
</body>
</html>